<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .ani-swing-in-top {
            animation: swing-in-top .3s ease-in-out both;
        }
        .ani-swing-out-top {
            animation: swing-out-top .5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
        }
        @keyframes swing-in-top {
            0% {
                transform: rotateX(-60deg);
                transform-origin: top;
                opacity: 0;
            }
            100% {
                transform: rotateX(0deg);
                transform-origin: top;
                opacity: 1;
            }
        }
        @keyframes swing-out-top {
            0% {
                transform: rotateX(0);
                transform-origin: top;
                opacity: 1;
            }
            100% {
                transform: rotateX(-60deg);
                transform-origin: top;
                opacity: 0;
            }
        }
        :root{
            background-color: #6772e5;
        }
        .list{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            list-style: none;
            font-size: 18px;
        }
        .list-item {
            position: relative;
        }
        .list-item-title {
            padding: 10px 20px;
        }
        .list-item-title:hover {
            cursor: pointer;
        }
        .child-menu{
            position: absolute;
            margin-top: 10px;
            left: 50%;
            transform: translateX(-50%);
            perspective: 2000px;
            /* display: none; */
        }
        .select-wrapper {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 1px 0 6px hsl(240deg, 10%, 90%);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .select-wrapper::before{
            content: '';
            display: block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom: 10px solid #ffffff;
            position: absolute;
            top: -20px;
            /* drop-shadow设置不规则图形阴影 */
            filter: drop-shadow(0 -1px 1px hsl(240deg, 10%, 90%));
        }
        /* .list-item:hover .child-menu{
            display: block;
        } */
    </style>
</head>
<body>
    <div class="menu">
        <ul id="list" class="list">
            <li class="list-item">
                <div class="list-item-title">指南</div>
                <!-- 如果元素定位需要用transform,动画也需要用transform，将定位和动画，应用于2个元素上 -->
                <!-- child-menu进行水平居中 -->
                <div class="child-menu">
                    <!-- select-wrapper进行动画 -->
                    <!-- <div class="select-wrapper">
                        <div class="select" style="width: 300px;height: 400px;">
                            <div>sdf</div>
                            <div>123</div>
                        </div>
                    </div> -->
                </div>
            </li>
            <li class="list-item">
                <div class="list-item-title">组件</div>
                <div class="child-menu"></div>
            </li>
            <li class="list-item">
                <div class="list-item-title">文档</div>
                <div class="child-menu"></div>
            </li>
        </ul>
    </div>
    <template id="child-menu-tpl">
        <div class="select-wrapper">
            <div class="select" style="width: 300px;height: 400px;">
                <div>sdf</div>
                <div>123</div>
            </div>
        </div>
    </template>
    <script src="./flip.js"></script>
    <script>
        let flip = null;
        const list = document.querySelector('.list');
        const listItems = document.querySelectorAll('.list-item-title');
        const tpl = document.querySelector('#child-menu-tpl');
        [...listItems].forEach((listItem) => {
            listItem.addEventListener('mouseenter', (e) => {
                const target = e.target.parentNode;
                const childMenuEl = target.querySelector('.child-menu');
                if(!flip) {
                    childMenuEl.innerHTML = tpl.innerHTML;
                    const selWrapper = target.querySelector('.select-wrapper');
                    selWrapper.classList.add('ani-swing-in-top');
                    flip = flipAni('.select-wrapper');
                }else {
                    const selWrapper = document.querySelector('.select-wrapper');
                    selWrapper.classList.remove('ani-swing-in-top');
                    // 先清空再追加
                    childMenuEl.innerHTML = '';
                    childMenuEl.appendChild(selWrapper);
                    flip.play((invertBefore, invertAfter) => {
                        return [
                            { transform: `translate(${invertBefore.left - invertAfter.left}px, ${invertBefore.top - invertAfter.top}px)`},
                            { transform: 'none' }
                        ]
                    }, {
                        duration: 180,
                        easing: 'cubic-bezier(0.29, 0.69, 0.36, 0.79)'
                    });
                }
            });
        });
        list.addEventListener('mouseleave', (e) => {
            console.log('mouseleave', e.target);
            // 离开list后，重生执行flip动画
            flip = null;
            const target = e.target;
            const selWrapper = target.querySelector('.select-wrapper');
            if(selWrapper) {
                selWrapper.classList.remove('ani-swing-in-top');
                selWrapper.classList.add('ani-swing-out-top');
            }
        })
        list.addEventListener('animationend', (e) => {
            if(e.animationName === 'swing-out-top' && e.target === document.querySelector('.select-wrapper')) {
                e.target.parentNode.removeChild(e.target);
            }
        });
    </script>
</body>
</html>